<template>
	<div :class="loadingBox ? 'layout-table-footer-loading':'layout-table-footer'">
		<div style="display: flex;margin-top: 40px;justify-content: center;" v-if="!loadingBox">
			<div style="width: 80px;min-width: 80px;">种子位置：</div>
			<div>{{seed_site}}</div>
		</div>
		<div v-if="loadingBox && gridtable.length > 4" style="display: flex;justify-content: space-between;width: 100%;">
			<table class="gridtable" style="width: 40%;height: 100%">
				<tr>
					<th>种子号</th>
					<th>姓名</th>
					<th>签位</th>
					<th>单位</th>
				</tr>
				<tr v-for="(item, index) in gridtable.slice(0,4)" :key="index">
					<td>{{item.seed_site}}</td>
					<td>{{item.name}}</td>
					<td>{{item.sign}}</td>
					<td>{{item.company}}</td>
				</tr>
			</table>
			<table class="gridtable" style="width: 40%;height: 100%">
				<tr>
					<th>种子号</th>
					<th>姓名</th>
					<th>签位</th>
					<th>单位</th>
				</tr>
				<tr v-for="(item, index) in gridtable.slice(4,8)" :key="index">
					<td>{{item.seed_site}}</td>
					<td>{{item.name}}</td>
					<td>{{item.sign}}</td>
					<td>{{item.company}}</td>
				</tr>
			</table>
			<table class="gridtable" style="width: 20%;height: 100%">
				<tr>
					<th style="height: 11px;line-height: 11px;padding: 6px;">抽签时间</th>
				</tr>
				<tr>
					<td style="height: 12px;line-height: 12px;padding: 4px;text-align: center;font-weight: 700;">{{drawTimes}}</td>
				</tr>
				<tr>
					<th style="height: 12px;line-height: 12px;padding: 3px;">抽签代表</th>
				</tr>
				<tr>
					<td></td>
				</tr>
				<tr>
					<th>裁判长签名</th>
				</tr>
				<tr>
					<td></td>
				</tr>
			</table>
		</div>
		<div v-if="loadingBox && gridtable.length > 8" style="display: flex;justify-content: space-between;width: 100%;">
			<table class="gridtable" style="width: 80%;height: 100%">
				<tr>
					<th>种子号</th>
					<th>姓名</th>
					<th>签位</th>
					<th>单位</th>
				</tr>
				<tr v-for="(item, index) in gridtable" :key="index">
					<td>{{item.seed_site}}</td>
					<td>{{item.name}}</td>
					<td>{{item.sign}}</td>
					<td>{{item.company}}</td>
				</tr>
			</table>
			<table class="gridtable" style="width: 20%;height: 100%">
				<tr>
					<th style="height: 11px;line-height: 11px;padding: 6px;">抽签时间</th>
				</tr>
				<tr>
					<td style="height: 12px;line-height: 12px;padding: 4px;text-align: center;font-weight: 700;">{{drawTimes}}</td>
				</tr>
				<tr>
					<th style="height: 12px;line-height: 12px;padding: 3px;">抽签代表</th>
				</tr>
				<tr>
					<td></td>
				</tr>
				<tr>
					<th>裁判长签名</th>
				</tr>
				<tr>
					<td></td>
				</tr>
			</table>
		</div>
	</div>
</template>

<script>
	export default {
		name: "layoutTableFooter",
		props: {
			seed_site: String,
			loadingBox: Boolean,
			drawTime: Number
		},
		computed: {
			drawTimes() {
				let unixtime = this.drawTime
				let unixTimestamp = new Date(unixtime * 1000)
				let Y = unixTimestamp.getFullYear()
				let M = ((unixTimestamp.getMonth() + 1) >= 10 ? (unixTimestamp.getMonth() + 1) : '0' + (unixTimestamp.getMonth() +
					1))
				let D = (unixTimestamp.getDate() >= 10 ? unixTimestamp.getDate() : '0' + unixTimestamp.getDate())
				let h = (unixTimestamp.getHours() >= 10 ? unixTimestamp.getHours() : '0' + unixTimestamp.getHours())
				let m = (unixTimestamp.getMinutes() >= 10 ? unixTimestamp.getMinutes() : '0' + unixTimestamp.getMinutes())
				let s = (unixTimestamp.getSeconds() >= 10 ? unixTimestamp.getSeconds() : '0' + unixTimestamp.getSeconds())
				let toDay = Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' + s
				return toDay
			},
			gridtable() {
				let seed = this.seed_site == '没有种子' ? false : true
				if (seed) {
					let substrArr = []
					let seed_site = this.seed_site.split('，')
					let surplus
					for (let i = 0; i < seed_site.length; i++) {
						let obj = {}
						obj.seed_site = seed_site[i].split("-")[0]
						obj.name = seed_site[i].split("(")[0].split("-")[1]
						obj.sign = seed_site[i].split("(")[1].split(")")[0]
						obj.company = seed_site[i].split("-")[2]
						substrArr.push(obj)
					}
					substrArr.sort(this.compare("seed_site"));
					console.log(substrArr);
					if (seed_site.length / 4 != 0 && seed_site.length > 4) {
						surplus = 8 - seed_site.length
						for (let i = 0; i < surplus; i++) {
							let obj = {}
							obj.seed_site = ''
							obj.name = ''
							obj.sign = ''
							obj.company = ''
							substrArr.push(obj)
						}
					} else {
						surplus = 4 - seed_site.length
						for (let i = 0; i < surplus; i++) {
							let obj = {}
							obj.seed_site = ''
							obj.name = ''
							obj.sign = ''
							obj.company = ''
							substrArr.push(obj)
						}
					}

					return substrArr
				} else {
					let substrArr = []
					return substrArr
				}
			},
		},
		methods: {
			compare(property) { //按对象属性值排序
				return function(a, b) {
					var value1 = a[property];
					var value2 = b[property];
					return value1 - value2;
				}
			}
		}
	}
</script>

<style scoped>
	.layout-table-footer {
		/*height: 180px;*/
		margin-bottom: 20px;
		width: 90%;
		margin-left: 5%;
		margin-right: 5%;
	}

	.layout-table-footer-loading {
		/*height: 180px;*/
		margin-bottom: 20px;
		width: 80%;
		font-size: 16px;
		margin-left: 10%;
	}

	table.gridtable {
		width: 100%;
		font-family: verdana, arial, sans-serif;
		font-size: 11px;
		color: #333333;
		border-width: 1px;
		border-color: #666666;
		border-collapse: collapse;
	}

	table.gridtable th {
		height: 7px;
		line-height: 7px;
		border-width: 1px;
		padding: 8px;
		border-style: solid;
		border-color: #666666;
		background-color: #dedede;
	}

	table.gridtable td {
		line-height: 15px;
		height: 15px;
		border-width: 1px;
		padding: 8px;
		border-style: solid;
		border-color: #666666;
		background-color: #ffffff;
	}
</style>
